<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/icon.css">
    <link rel="stylesheet" href="css/details.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/useker.Tools.js"></script>

</head>
<body>
<div class="topbar" id="abc">
    <div class="container">
        <div class="nav">
            <a href="#">小米商城</a><span>|</span>
            <a href="#">MiUi</a><span>|</span>
            <a href="#">ioT</a><span>|</span>
            <a href="#">云服务</a><span>|</span>
            <a href="#">金融</a><span>|</span>
            <a href="#">有品</a><span>|</span>
            <a href="#">小爱开发平台</a><span>|</span>
            <a href="#">政企服务</a><span>|</span>
            <a href="#">资质证照</a><span>|</span>
            <a href="#">协议规则</a><span>|</span>
            <a href="#">下载app</a><span>|</span>
            <a href="#">Select Region</a>
        </div>
        <div class="cart">
            <a href="#">
                <i class="icon-shopping-cart"></i>
                购物车(0)
            </a>
            <div class="cart-menu">
                <div class="loading">
                    购物车中还没有商品，赶紧选购吧！
                    <div class="loader">

                    </div>
                </div>
            </div>
        </div>
        <div class="info">
            <a href="" id="log">登录</a><span>|</span>
            <a href="" id="reg">注册</a><span>|</span>
            <span class="message">
                <a href="#">消息通知</a>
            </span>
        </div>
    </div>
</div>
<!--用户协议-->
<div id="J_agreeModal" class="modal fade modal-agree modal-hide in">
    <div class="modal-hd">
        <a href="" class="close J_close">
            <i class="iconfont">x</i>
        </a>
        <h3>协议声明</h3>
    </div>
    <div class="modal-body">
        <div class="desc">
            <span class="agree-tab">《小米商城用户协议》</span>
            <span class="agree-tab">《账号协议》</span>
            <span class="agree-tab">《隐私政策》</span>
            请您仔细阅读以上协议，其中有对您权利义务的特别约定等重要条款，同意后方可使用本软件
        </div>
        <div class="con">
            <div class="agreement-box">
                <div id="J_con">
                    <h2>小米商城用户协议</h2>
                    <div class="time">版本日期：2018年12月18日</div>
                    <p>
                        《小米商城用户协议》（以下简称“本协议”）是您（或称“用户”，指注册、登录、使用、浏览小米商城的个人或组织）与小米科技有限责任公司（平台运营主体）及其关联公司（包括但不限于小米通讯技术有限公司，以下简称“小米”）及其合作单位（包括但不限于第三方商家）之间关于小米商城网站（域名为www.mi.com，简称本网站）与小米产品、程序及服务所订立的协议。小米和合作单位分别就您在本网站接受服务的过程中享受的权利和承担的义务，与您签订本协议，并独立向您承担责任，互不承担保证、连带或共同责任等。
                    </p>
                    <p class="fb">
                        小米在此特别提醒用户认真阅读 、充分理解---本协议中各条款。您对本协议的接受即自愿接受全部条款的约束，请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款、法律适用和争议解决条款，尤此类条款将以加粗的形式提示您注意。如您同意本协议并完成全部注册程序，即表示您已充分阅读、理解并接受本协议的全部内容，并与小米达成一致，成为小米商城平台用户。阅读本协议的过程中，如果您不同意本协议或其中任何条款约定，您应立即停止注册程序。
                    </p>
                    <h3>
                        一、协议范围
                    </h3>
                    <h4>1.1【主体范围】</h4>
                    <p>小米商城平台运营主体为小米科技有限责任公司，自营商品的销售主体以小米商城网站页面公示的证照信息为准（包括但不限于小米通讯技术有限公司）。本协议项下，</p>
                    <h4>1.2【协议补充】</h4>
                    <p>
                        小米隐私政策（http://www.mi.com/about/new-privacy/）、小米帐号使用协议均为本协议不可分割的一部分，与本协议具有同等法律效力。
                    </p>
                    <p>
                        考虑到互联网业务的高速发展，本协议条款并不能完整覆盖您与小米的所有权利和义务，也不能保证完全符合发展的需求。
                    </p>
                    <span class="fb">
                小米商城平台的法律声明、隐私政策、平台规范、规则、通知、公告、操作规则、帮助文档、温馨提示等均为本协议的补充协议，与本协议不可分割且具有同等法律效力。如您使用本平台服务，视为您同意上述补充协议。
            </span>
                </div>
                <a href="#" class="btn">下载协议</a>
            </div>
        </div>

        <div class="modal-ft">
            <div class="actions">
                <button class="btn btn-line-gray J_close"><a href="">不同意</a></button>
                <button class="btn btn-primary J_sure"><a href="">同意</a></button>
            </div>
        </div>
    </div>
</div>
<!--米图标加搜索框-->
<div class="site-header">
    <div class="container">
        <div class="header-logo">
            <a href="index.html" class="logo ir">
                <img src="img/Satyr.png" alt="小米官方">
            </a>
        </div>
        <div class="header-nav">
            <ul>
                <li><a href="">小米手机</a></li>
                <li><a href="">红米</a></li>
                <li><a href="">电视</a></li>
                <li><a href="">笔记本</a></li>
                <li><a href="">家电</a></li>
                <li><a href="">新品</a></li>
                <li><a href="">路由器</a></li>
                <li><a href="">智能硬件</a></li>
                <li><a href="">服务</a></li>
                <li><a href="">社区</a></li>
            </ul>
        </div>
        <div class="header-search">
            <form action="" class="search-form">
                <input type="search" class="search-text">
                <a href="" class="span1"><i class="icon-search"></i></a>
                <div class="search-hot-words">
                    <a href="">小米8</a>
                    <a href="">小米MIX 2S</a>
                </div>
            </form>
        </div>
        <div id="J-navMenu" class="header-nav-menu header-nav-menu-active">
            <div class="container">
                <ul class="children-list clearfix">
                    <li class="first">
                        <div class="figure figure-thumb">
                            <a href="">
                                <img src="img/mix3-320.png" alt="">
                            </a>
                        </div>
                        <div class="title">
                            <a href="">小米MIX 3</a>
                        </div>
                        <p class="price">3299元起</p>
                        <div class="flags">
                            <div class="flag">新品</div>
                        </div>
                    </li>
                    <li>
                        <div class="figure figure-thumb">
                            <a href="">
                                <img src="img/qingchun-320.png" alt="">
                            </a>
                        </div>
                        <div class="title">
                            <a href="">小米8 青春版</a>
                        </div>
                        <p class="price">1399元起</p>
                    </li>
                    <li>
                        <div class="figure figure-thumb">
                            <a href="">
                                <img src="img/pc-320-220-mi8.png" alt="">
                            </a>
                        </div>
                        <div class="title">
                            <a href="">小米8</a>
                        </div>
                        <p class="price">2699元起</p>
                    </li>
                    <li>
                        <div class="figure figure-thumb">
                            <a href="">
                                <img src="img/pc-320-miplay-1.png" alt="">
                            </a>
                        </div>
                        <div class="title">
                            <a href="">小米Play</a>
                        </div>
                        <p class="price">1099元起</p>
                    </li>
                    <li>
                        <div class="figure figure-thumb">
                            <a href="">
                                <img src="img/pc-320-220-mi8se.png" alt="">
                            </a>
                        </div>
                        <div class="title">
                            <a href="">小米8 SE</a>
                        </div>
                        <p class="price">1699元起</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--导航栏-->
<div id="J_proHeader">
    <div class="xm-product-box">
        <div class="nav-bar" id="J_headNav">
            <div class="container J_navSwitch">
                <h2 class="J_proName">小米8 青春版</h2>
                <div class="con">
                   <div class="right">
                       <a href="">概述</a>
                       <span class="separator">|</span>
                       <a href="">图集</a>
                       <span class="separator">|</span>
                       <a href="">参数</a>
                       <span class="separator">|</span>
                       <a href="">F码通道</a>
                       <span class="separator">|</span>
                       <a href="">用户评价</a>
                   </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--内容-->
<div class="xm-buyBox" id="J_buyBox">
    <div class="box clearfix">
        <div class="pro-choose-main container clearfix">
            <!--左边图片以及放大镜-->
            <div class="pro-view span10">
                <div id="big_box" class="img-con" style="left: 1px; margin-top: 0px;">
                    <img src="img2/pms_1537324004.07876883.jpg" alt="">
                    <div id="inner_box" style="display: none">

                    </div>
                </div>
                <div id="big_box_max" style="display: none">
                    <img src="img2/pms_1537324004.07876883.jpg" alt="">
                </div>
            </div>
            <!--右边内容-->
            <div class="pro-info span10">
                <h1 class="pro-title J_proName">
                    <span class="name">小米8 青春版</span>
                </h1>
                <p class="sale-desc" id="J_desc">
                    <font color="#ff4a00">
                        「4GB+64GB 深空灰 1299元」「6GB+64GB 全色系1499元」
                    </font>
                    潮流镜面渐变色 / 2400万自拍旗舰 / 7.5mm超薄机身 / 6.26"小刘海全面屏 / AI裸妆美颜 / 骁龙660AIE处理器
                </p>
                <!--主体部分-->
                <div class="J_main">
                    <p class="aftersale-company" id="J_aftersaleCompany">
                        小米自营
                    </p>
                    <!--价格-->
                    <div class="pro-price J_proPrice">
                        <span class="price">
                            1499
                            <del>1699</del>
                        </span>
                    </div>
                    <!--赠品-->
                    <div class="J_saleWrap sale-wrap">
                        <div class="J_flowWrap flow-wrap">
                            <ul>
                                <li>
                                    <span class="flow-tag">赠品</span>
                                    <span class="flow-name">赠米粉卡，最高含100元话费</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 分仓地址 -->
                    <div class="J_addressWrap address-wrap">
                        <div class="user-default-address">
                            <i class="icon-location"></i>
                            <div>
                               <div class="address-info">
                                   <span class="item">北京</span>
                                   <span class="item">北京市</span>
                                   <span class="item">东城区</span>
                                   <span class="item">永定门外街道</span>
                               </div>
                                <span class="switch-choose-regions">
                                     修改
                                </span>
                            </div>
                            <div class="product-status active">
                                <span class="sale">有现货</span>
                            </div>
                        </div>
                    </div>
                    <!-- 产品版本 -->
                    <div class="list-wrap">
                        <!--选择版本-->
                        <div class="pro-choose pro-choose-col2 J_step">
                            <div class="step-title">选择版本</div>
                        <ul class="step-list step-one clearfix" style="width: 612px">
                            <li class="btn btn-biglarge active">
                            <a href="">
                                <span class="name">6GB+64GB 全网通 </span>
                                <span class="price"> 1499元 </span>
                            </a>
                        </li>
                            <li class="btn btn-biglarge">
                                <a href="">
                                    <span class="name">4GB+64GB 全网通 </span>
                                    <span class="price"> 1299元 </span>
                                </a>
                            </li>
                            <li class="btn btn-biglarge">
                                <a href="">
                                    <span class="name">6GB+128GB 全网通 </span>
                                    <span class="price"> 1999元 </span>
                                </a>
                            </li>
                        </ul>
                        </div>
                        <!--选择颜色-->
                        <div class="colour">
                            <div class="colourq" data-name="选择颜色"> 选择颜色  </div>
                            <ul>
                                <li>
                                    <a href=""><img src="img2/ys1.jpg" alt="">
                                        梦幻篮
                                    </a></li>
                                <li>
                                    <a href=""><img src="img2/ys2.jpg" alt="">
                                        深空灰
                                    </a></li>
                                <li>
                                    <a href=""><img src="img2/ys3.jpg" alt="">
                                        暮光金
                                    </a></li>
                            </ul>
                        </div>
                        <!--选择小米提供的延长保修-->
                        <div class="pro-choose list-choose list-choose-small J_service" style="margin-bottom: 70px">
                            <div class="step-title">
                                选择小米提供的延长保修
                                <a href="">了解延长保修 ></a>
                            </div>
                            <ul>
                                <li>
                                    <span class="efg"><input type="checkbox"></span>
                                    <img src="img2/bao.jpg" alt="">
                                    <div>
                                        <span class="name"> 延长保修服务   </span>
                                        <p class="desc">厂保延一年，性能故障免费维修</p>
                                        <p class="agreement">
                                            <span class="efg"><input type="checkbox" class="J_read"></span>我已阅读
                                            <a href="">服务条款<span>|</span></a>
                                            <a href="">常见问题</a>
                                        </p>
                                        <p class="price">29元</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--选择小米提供的意外保护-->
                        <div class="pro-choose list-choose list-choose-small J_service" style="height: 315px">
                            <div class="step-title">
                                选择小米提供的意外保护
                                <a href="">了解意外保护 > ></a>
                            </div>
                            <ul>
                                <li>
                                    <span class="efg"><input type="checkbox"></span>
                                    <img src="img2/bao.jpg" alt="">
                                    <div>
                                        <span class="name">全年意外保障服务</span>
                                        <p class="desc">手机意外摔落/进水/碾压等损坏</p>
                                        <p class="agreement">
                                            <span class="efg"><input type="checkbox" class="J_read"></span>我已阅读
                                            <a href="">服务条款<span>|</span></a>
                                            <a href="">常见问题</a>
                                        </p>
                                        <p class="price">99元</p>
                                    </div>
                                </li>
                                <li>
                                    <span class="efg"><input type="checkbox"></span>
                                    <img src="img2/bao.jpg" alt="">
                                    <div>
                                        <span class="name">全年碎屏保障服务</span>
                                        <p class="desc">手机意外碎屏</p>
                                        <p class="agreement">
                                            <span class="efg"><input type="checkbox" class="J_read"></span>我已阅读
                                            <a href="">服务条款<span>|</span></a>
                                            <a href="">常见问题</a>
                                        </p>
                                        <p class="price">59元</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- 已选择的产品 -->
                        <div class="pro-list" id="J_proList">
                            <ul>
                                <li>小米8 青春版 6GB+64GB 梦幻蓝
                                    <del>1699元</del>
                                    <span>                 1499 元 </span>
                                </li>
                                <li class="totlePrice">
                                    总计   ：1499元
                                </li>
                            </ul>
                        </div>
                        <ul class="btn-wrap clearfix">
                            <li>
                                <a href="" class="btn btn-primary  btn-biglarge J_proBuyBtn">加入购物车</a></li>
                            <li>
                                <a href="" class="btn-gray btn-like btn-biglarge">
                                   <i class="icon-apparel"></i>
                                    喜欢
                                </a>
                            </li>
                        </ul>
                        <div class="pro-policy">
                            <a href=""><span><i class="icon-checkmark-outline"></i>
                           <em>小米自营</em> </span></a>
                            <a href=""><span><i class="icon-checkmark-outline"></i>
                        <em>小米发货</em></span></a>
                            <a href=""><span><i class="icon-checkmark-outline"></i>
                        <em>7天无理由退货</em></span></a>
                            <a href=""><span><i class="icon-checkmark-outline"></i>
                        <em>运费说明</em></span></a>
                            <a href=""><span style="margin-right: -15px"><i class="icon-checkmark-outline"></i>
                        <em>售后服务政策</em></span></a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!--价格说明-->
        <div class="infor-con">
            <div class="section is-visible preload">
                <div class="container">
                    <h3>价格说明  </h3>
                    <div class="con">
                        <img src="img2/hxj.jpeg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页尾-->
<div class="site-footer">
    <div class="container">
        <div class="footer-service">
            <ul class="list-service clearfix">
                <li><a href=""><i class="icon-wrench"></i>预约维修服务</a></li>
                <li><a href=""><i class="icon-information-outline"></i>7天无理由退货</a></li>
                <li><a href=""><i class="icon-exclamation-outline"></i>15天免费换货</a></li>
                <li><a href=""><i class="icon-gift"></i>满150元包邮</a></li>
                <li><a href=""><i class="icon-location"></i>520余家售后网点</a></li>
            </ul>
        </div>
        <div class="footer-links clearfix">
            <dl class="col-links col-links-first">
                <dt>帮助中心</dt>
                <dd><a href="">账户管理</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
            </dl>
            <dl class="col-links">
                <dt>服务支持</dt>
                <dd><a href="">售后政策</a></dd>
                <dd><a href="">自助服务</a></dd>
                <dd><a href="">相关下载</a></dd>
            </dl>
            <dl class="col-links">
                <dt>线下门店</dt>
                <dd><a href="">小米之家</a></dd>
                <dd><a href="">服务网点</a></dd>
                <dd><a href="">授权体验店</a></dd>
            </dl>
            <dl class="col-links">
                <dt>关于小米</dt>
                <dd><a href="">了解小米</a></dd>
                <dd><a href="">加入小米</a></dd>
                <dd><a href="">投资者关系</a></dd>
            </dl>
            <dl class="col-links">
                <dt>关注我们</dt>
                <dd><a href="">新浪微博</a></dd>
                <dd><a href="">官方微信</a></dd>
                <dd><a href="">联系我们</a></dd>
            </dl>
            <dl class="col-links">
                <dt>特色服务</dt>
                <dd><a href="">F 码通道</a></dd>
                <dd><a href="">礼物码</a></dd>
                <dd><a href="">防伪查询</a></dd>
            </dl>
            <div class="col-contact">
                <p class="phine">400-100-5678</p>
                <p>
                    周一至周日 8:00-18:00
                    <br>
                    （仅收市话费）
                </p>
                <a href="#" class="btn btn-line-primary btn-small">
                    <i class="icon-envelope"></i>
                    联系客服
                </a>
            </div>
        </div>
    </div>
</div>
<div class="site-info">
    <div class="container">
        <div class="logo ir" style="background: url(img/Satyr.png) no-repeat 50% 50%">小米官网</div>
        <div class="info-text">
            <p class="sites"><a rel="nofollow" href="//www.mi.com/index.html"   target="_blank">小米商城</a><span class="sep">|</span><a rel="nofollow" href="https://www.miui.com/"   target="_blank">MIUI</a><span class="sep">|</span><a rel="nofollow" href="https://home.mi.com/index.html"   target="_blank">米家</a><span class="sep">|</span><a rel="nofollow" href="http://www.miliao.com/"   target="_blank">米聊</a><span class="sep">|</span><a rel="nofollow" href="https://www.duokan.com/"   target="_blank">多看</a><span class="sep">|</span><a rel="nofollow" href="http://game.xiaomi.com/"   target="_blank">游戏</a><span class="sep">|</span><a rel="nofollow" href="http://www.miwifi.com/"   target="_blank">路由器</a><span class="sep">|</span><a rel="nofollow" href="//www.mi.com/micard/"   target="_blank">米粉卡</a><span class="sep">|</span><a rel="nofollow" href="https://b.mi.com/?client_id=180100031058&masid=17409.0358"   target="_blank">政企服务</a><span class="sep">|</span><a rel="nofollow" href="https://xiaomi.tmall.com/"   target="_blank">小米天猫店</a><span class="sep">|</span><a rel="nofollow" href="//www.mi.com/about/privacy/"   target="_blank">隐私政策</a><span class="sep">|</span><a rel="nofollow" href="//www.mi.com/about/user-agreement/"   target="_blank">商城用户协议</a><span class="sep">|</span><a rel="nofollow" href="//static.account.xiaomi.com/html/agreement/account/cn.html"   target="_blank">账号协议</a><span class="sep">|</span><a rel="nofollow" href="https://static.mi.com/feedback/"   target="_blank">问题反馈</a><span class="sep">|</span><a rel="nofollow" href="//www.mi.com/jiancha/"   target="_blank">廉正举报</a><span class="sep">|</span><a rel="nofollow" href="https://integrity.mi.com/"   target="_blank">诚信合规</a><span class="sep">|</span><a rel="nofollow" href="#J_modal-globalSites" data-toggle="modal" >Select Region</a>            </p>
            <p>&copy;
                <a href=" " target="_blank" title="mi.com">mi.com</a> 京ICP证110507号
                <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a>
                <a rel="nofollow" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134" target="_blank">京公网安备11010802020134号 </a>
                <a href="//www.mi.com/culture-license/" target="_blank">京网文[2017]1530-131号</a> <br>
                <a href="//www.mi.com/medical/record/" target="_blank">（京）网械平台备字（2018）第00005号
                </a>
                <a href="//www.mi.com/medical/qualification/" target="_blank">互联网药品信息服务资格证 (京) -非经营性-2014-0090
                </a>
                <a href="//www.mi.com/business-license/" target="_blank">营业执照</a>
                <a href="//www.mi.com/medical/list/" target="_blank">医疗器械公告</a>
                <br>
                <a href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/af5b8ef38e7d57c5ee7fa4289ccf4df8.png" target="_blank">增值电信业务许可证</a>&nbsp;
                网络食品经营备案（京）【2018】WLSPJYBAHF-12  &nbsp;
                <a href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/fe7383e11127caea371f17156f429a1e.png" target="_blank">食品经营许可证</a>
                <br>违法和不良信息举报电话：185-0130-1238 <a href= 'https://www.mi.com/static/intellectual/index.html' target="_blank">知识产权侵权投诉</a> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        </div>
        <div class="info-links">
            <a href=""><img src="img2/truste.png" alt=""></a>
            <a href=""><img src="img2/v-logo-2.png" alt=""></a>
            <a href=""><img src="img2/v-logo-1.png" alt=""></a>
            <a href=""><img src="img2/v-logo-3.png" alt=""></a>
            <a href=""><img src="img2/footer.png" alt=""></a>
        </div>
    </div>
    <div class="slogan ir">
        探索黑科技，小米为发烧而生
    </div>
</div>
</body>
</html>
<script>
    //最上面的导航栏
    var oLog=document.getElementById("log");
    var oReg=document.getElementById("reg");
    var oJ=document.querySelector(".modal-hide");
    var oGray=document.querySelector(".btn-line-gray");
    var Primary=document.querySelector(".btn-primary");
    var oIcon=document.querySelector(".iconfont");

    oLog.onclick=function () {
        oJ.style.display="block";
        return false;
    }
    oReg.onclick=function () {
        oJ.style.display="block";
        return false;
    }
    oGray.onclick=function () {
        oJ.style.display="none";
        return false;
    }
    Primary.onclick=function () {
        window.location="login.html"
        return false;
    }
    oIcon.onclick=function () {
        oJ.style.display="none";
        return false;
    }
    //米图标加搜索框
    var ohdLi=document.querySelectorAll(".header-nav ul li a");
    console.log(ohdLi);
    var oMenu=document.getElementById("J-navMenu");
    console.log(oMenu);
    for (var i = 0; i < 8; i++) {
        ohdLi[i].index=i;
        ohdLi[i].onmouseenter=function () {
            oMenu.style.display="block";
        }
        ohdLi[i].onmouseleave=function () {
            oMenu.style.display="none";
        }

    }

    //固定导航栏
    // window.onload = function(){
    //     var oTop = document.getElementById('J_proHeader');
    //     console.log(oTop);
    //     var oNav = document.getElementById('J_buyBox');
    //     console.log(oNav);
    //     var topH = oTop.offsetHeight;
    //     var navH = oNav.offsetHeight;
    //
    //     //1.给window或document绑定滚动事件
    //     window.onscroll = function(){
    //         //2.条件一获取滚动条的高度 ,条件二 top的高度
    //         var scrollTop = scroll().top;
    //         //3.让滚动条的高度与 top的高度进行比较
    //         if(scrollTop > topH){
    //             //4.如果滚动条的高度大于top的高度,让nav固定在顶部
    //             oNav.style.position = "fixed";//固定在顶部
    //             oNav.style.top = "0px";
    //             //让第一个div,帮nav留住位置
    //             oTop.style.marginBottom = navH + "px";
    //         } else {
    //             //5.否则 小于,让NAV回到原来的位置
    //             oTop.style.marginBottom = "0px";
    //             oNav.style.position = "static";
    //         }
    //     }
    // }


    //放大镜
    function getStyle(ele, attr){
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }
        return window.getComputedStyle(ele, null)[attr];
    }
    //
    var obig_box=document.getElementById("big_box");//大盒子
    var obig_box_max=document.getElementById("big_box_max");//放大镜盒子
    var oinner_box=document.getElementById("inner_box");//小盒子
    var img1=document.querySelector("#big_box img");//小照片
    var img2=document.querySelector("#big_box_max img");//大照片
    console.log(oinner_box.offsetHeight);
    //
    // 小区域=(小图/大图)*大区域
    var smImgW = img1.offsetWidth;
    var bigImgW = parseInt(getStyle(img2, "width"));
    var bigAreaW = parseInt(getStyle(obig_box_max, "width"));
    var smImgH = img1.offsetHeight;
    var bigImgH = parseInt(getStyle(img2, "height"));
    var bigAreaH = parseInt(getStyle(obig_box_max, "height"));

    oinner_box.style.width = (smImgW / bigImgW) * bigAreaW + "px";
    console.log(oinner_box.style.width);
    oinner_box.style.height = (smImgH / bigImgH) * bigAreaH + "px";

    //2.移动的比例  大图/小图   或 大区域/小区域
    var oScale = bigImgW / smImgW;
    var oCenter=document.querySelector(".xm-buyBox");
    console.log(oCenter);
    obig_box.onmouseenter=function(evt){
        var e = evt ||window.event;
        //小盒子显示
        oinner_box.style.display="block";//小盒子显示
        obig_box_max.style.display="block";//大盒子显示
        document.onmousemove=function(evt){

            var e=evt||window.event;
            var disX=e.clientX-obig_box.offsetLeft-oinner_box.offsetWidth-59;
            console.log(disX);
            var disY=e.clientY-obig_box.offsetTop-oCenter.offsetTop-oinner_box.offsetHeight/2+$(document).scrollTop();
            console.log(disY);
            if(disX<=0){
                disX=0;
            }
            if(disX>=obig_box.offsetWidth- oinner_box.offsetWidth){
                disX=obig_box.offsetWidth- oinner_box.offsetWidth;
            }

            if(disY<=0){
                disY=0;
            }
            if(disY>=obig_box.offsetHeight- oinner_box.offsetHeight){
                disY=obig_box.offsetHeight- oinner_box.offsetHeight;
            }
            img2.style.left=- disX*oScale+"px"
            img2.style.top=- disY*oScale+"px"
            oinner_box.style.left=disX+"px";
            oinner_box.style.top=disY+"px";
        }
    }
    obig_box.onmouseleave=function(evt){
        oinner_box.style.display="none";
        obig_box_max.style.display="none";
    }


</script>